<template>
  <div id="tab" v-if="wares">
    <ul class="tab_list" id="tab">
      <li @click="tab_index = 0" :class="tab_index == 0 ? 'cli' : ''">
        商品详情
      </li>
      <li @click="tab_index = 1" :class="tab_index == 1 ? 'cli' : ''">
        规格参数
      </li>
      <li @click="tab_index = 2" :class="tab_index == 2 ? 'cli' : ''">
        商品评论
      </li>
      <li @click="tab_index = 3" :class="tab_index == 3 ? 'cli' : ''">
        服务支持
      </li>
    </ul>
    <div class="tab_content">
      <div class="tab1" v-show="tab_index == 0">
        <div class="tab1_warp">
          <div class="card">
            <img :src="wares.gurl[0]" alt="" />
            <div class="detial">
              <div class="item" v-for="item in wares.att">{{ item }}</div>
            </div>
          </div>
          <p>
            <img v-for="item in tu1" v-lazy="item" alt="" />
          </p>
          <div class="infos">
            <p v-for="item in 9">
              <img
                v-lazy="`http://1.117.75.96:8080/infos/x${item}.jpg`"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <div class="tab2" v-show="tab_index == 1">
        <table>
          <tbody>
            <tr>
              <th colspan="2">主要参数</th>
            </tr>
            <tr>
              <td class="td_th">CPU型号</td>
              <td>R7-6800H</td>
            </tr>
            <tr>
              <td class="td_th">显卡型号</td>
              <td>GeForce RTX 3060</td>
            </tr>
            <tr>
              <td class="td_th">内存容量</td>
              <td>2*8GB</td>
            </tr>
            <tr>
              <td class="td_th">硬盘容量</td>
              <td>512GB M.2 NVMe</td>
            </tr>
            <tr>
              <td class="td_th">屏幕色域</td>
              <td>100% sRGB</td>
            </tr>
            <tr>
              <td class="td_th">分辨率</td>
              <td>全高清（1920 x 1080）</td>
            </tr>
            <tr>
              <td class="td_th">刷新率</td>
              <td>144Hz</td>
            </tr>
            <tr>
              <td class="td_th">散热规格</td>
              <td>双风扇五散热导管</td>
            </tr>
            <tr>
              <td class="td_th">显卡功耗</td>
              <td>140W</td>
            </tr>
            <tr>
              <th colspan="2">处理器信息</th>
            </tr>
            <tr>
              <td class="td_th">CPU规格</td>
              <td>AMD Ryzen™ 7 6800H</td>
            </tr>
            <tr>
              <td class="td_th">主频</td>
              <td>3.2 GHz (up to 4.7 GHz)</td>
            </tr>
            <tr>
              <td class="td_th">缓存</td>
              <td>16M高速缓存</td>
            </tr>
            <tr>
              <td class="td_th">线程</td>
              <td>8核16线程</td>
            </tr>
            <tr>
              <th colspan="2">显卡信息</th>
            </tr>
            <tr>
              <td class="td_th">显卡型号</td>
              <td>独显+核显</td>
            </tr>
            <tr>
              <td class="td_th">显存容量</td>
              <td>6GB GDDR6</td>
            </tr>
            <tr>
              <th colspan="2">内存信息</th>
            </tr>
            <tr>
              <td class="td_th">内存容量</td>
              <td>2*8G（插槽）</td>
            </tr>
            <tr>
              <td class="td_th">内存类型</td>
              <td>DDR5 4800MHz</td>
            </tr>
            <tr>
              <td class="td_th">内存插槽</td>
              <td>2x SO-DIMM插槽</td>
            </tr>
            <tr>
              <td class="td_th">最大支持容量</td>
              <td>2 x SODIMM 插槽 ，最大支持64GB</td>
            </tr>
            <tr>
              <th colspan="2">硬盘信息</th>
            </tr>
            <tr>
              <td class="td_th">硬盘容量</td>
              <td>512GB M.2 NVMe™ PCIe® 4.0 SSD</td>
            </tr>
            <tr>
              <th colspan="2">屏幕信息</th>
            </tr>
            <tr>
              <td class="td_th">屏幕尺寸</td>
              <td>15.6英寸</td>
            </tr>
            <tr>
              <td class="td_th">屏幕类型</td>
              <td>LED 背光非触摸屏</td>
            </tr>
            <tr>
              <td class="td_th">屏幕色域</td>
              <td>100% sRGB</td>
            </tr>
            <tr>
              <td class="td_th">刷新率</td>
              <td>144Hz</td>
            </tr>
            <tr>
              <td class="td_th">屏幕亮度</td>
              <td>250nits</td>
            </tr>
            <tr>
              <td class="td_th">屏幕分辨率</td>
              <td>FHD (1920 x 1080) 16:9</td>
            </tr>
            <tr>
              <th colspan="2">网络/蓝牙</th>
            </tr>
            <tr>
              <td class="td_th">局域网</td>
              <td>内建10/100/1000Mbps以太网络模块</td>
            </tr>
            <tr>
              <td class="td_th">无线网络</td>
              <td>Wi-Fi 6(802.11ax)</td>
            </tr>
            <tr>
              <td class="td_th">蓝牙类型</td>
              <td>蓝牙v5.2</td>
            </tr>
            <tr>
              <th colspan="2">机器信息</th>
            </tr>
            <tr>
              <td class="td_th">机身尺寸</td>
              <td>约354.9 x 251.9 x 22.45~24.95 mm</td>
            </tr>
            <tr>
              <td class="td_th">机身重量</td>
              <td>约2.1Kg</td>
            </tr>
            <tr>
              <td class="td_th">电池容量</td>
              <td>90WHrs,4S1P, 4-cell Li-ion</td>
            </tr>
            <tr>
              <td class="td_th">电源输出</td>
              <td>20V DC, 12A, 240W</td>
            </tr>
            <tr>
              <td class="td_th">扬声器</td>
              <td>
                内建Azalia compliant 声卡芯片 支持Dolby ATMOS 2个高品质扬声器
              </td>
            </tr>
            <tr>
              <td class="td_th">摄像头</td>
              <td>HD camera</td>
            </tr>
            <tr>
              <td class="td_th">散热规格</td>
              <td>双风扇五散热导管</td>
            </tr>
            <tr>
              <td class="td_th">外部材质</td>
              <td>金属材质；高强度复合材质</td>
            </tr>
            <tr>
              <td class="td_th">随机附件</td>
              <td>电源适配器、保卡、用户手册</td>
            </tr>
            <tr>
              <td class="td_th">保修信息</td>
              <td>1年整机国际联保，2年主要部件当地保修</td>
            </tr>
            <tr>
              <td class="td_th">商品型号</td>
              <td>FA507RM6800-0DAFXHB6X11</td>
            </tr>
            <tr>
              <td class="td_th">接口-左侧</td>
              <td>
                1x HDMI 2.0b 1x RJ45 LAN 1x USB 3.2 Gen1 Type-A 1x USB 3.2 Gen1
                Type-C 1x USB 3.2 Gen1Type-C，支持DP1.2 1x 耳机麦克风二合一接口
                1x电源接口
              </td>
            </tr>
            <tr>
              <td class="td_th">接口-右侧</td>
              <td>1x USB 3.2 Gen1 Type-A</td>
            </tr>
            <tr>
              <td class="td_th">接口-前侧</td>
              <td>无</td>
            </tr>
            <tr>
              <td class="td_th">接口-后侧</td>
              <td>无</td>
            </tr>
            <tr>
              <td class="td_th">操作系统</td>
              <td>Windows 11 Home</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tab3" v-show="tab_index == 2">
        <div class="title">商品评价</div>
        <div class="module">
          <div class="tab">
            <div>好评率</div>
            <div class="tab_rate">92.9%</div>
          </div>
        </div>
        <div class="pjTag">
          <ul @click="pjTag($event)">
            <li class="active">全部评价(2)</li>
            <li>晒图(0)</li>
            <li>视频晒图(0)</li>
            <li>追评(0)</li>
            <li>好评(2)</li>
            <li>中评(0)</li>
          </ul>
        </div>
        <div class="pj_content">
          <div class="item">
            <div class="l">
              <img
                src="https://bpic.51yuansu.com/pic3/cover/01/69/80/595f67bf2026f_610.jpg"
                alt=""
              />
              <div class="name">还在敲</div>
            </div>
            <div class="r">
              <div class="xing">
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <div>2023-01-26</div>
              </div>
              <div class="com">初五了那个傻逼还在敲代码</div>
              <div class="like">
                <span>点赞&nbsp;(0)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span
                  >留言&nbsp;(0)</span
                >
              </div>
            </div>
          </div>
          <div class="item">
            <div class="l">
              <img
                src="https://bpic.51yuansu.com/pic3/cover/01/69/80/595f67bf2026f_610.jpg"
                alt=""
              />
              <div class="name">傻逼</div>
            </div>
            <div class="r">
              <div class="xing">
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <img
                  src="https://static.asus.com.cn/static/store/newAcRefactor/images/evaluation_star.png"
                  alt=""
                />
                <div>2023-01-26</div>
              </div>
              <div class="com">妈的,臭傻逼原来是我</div>
              <div class="like">
                <span>点赞&nbsp;(0)</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span
                  >留言&nbsp;(0)</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab4" v-show="tab_index == 3">
        <img src="http://1.117.75.96:8080/infos/server.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from "vue";

let props = defineProps(["wares"]);

let tab_index = ref(0);
let tu1 = [
  "http://1.117.75.96:8080/infos/gg5.jpg",
  "http://1.117.75.96:8080/infos/i1.jpg",
  "http://1.117.75.96:8080/infos/i2.jpg",
  "http://1.117.75.96:8080/infos/i3.jpg",
  "http://1.117.75.96:8080/infos/i4.jpg",
  "http://1.117.75.96:8080/infos/i5.jpg",
];
</script>

<style lang="less" scoped>
.tab_list {
  height: 70px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;

  li {
    height: 70px;
    padding: 0px 40px;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
    color: #999999;
    font-size: 16px;
  }

  .cli {
    border-bottom: 1px solid rgb(30, 124, 255);
    color: #1e7cff;
  }
}
.tab_content {
  // background: #f2f2f2;

  .tab1 {
    padding: 20px 0px;
    background: #f2f2f2;

    .tab1_warp {
      width: 1226px;
      margin: auto;

      .card {
        padding: 20px;
        margin-bottom: 30px;
        display: flex;
        background: #fff;
        border: 1px solid #ddd;

        img {
          width: 200px;
          height: 200px;
          margin-right: 30px;
        }

        .detial {
          flex: 1;
          overflow: hidden;
          padding-top: 10px;
          box-sizing: border-box;

          .item {
            width: 33%;
            min-height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            display: inline-block;
          }
        }
      }

      p {
        font-size: 0;
      }

      .infos {
        img {
          width: 100%;
        }
      }
    }
  }

  .tab2 {
    width: 1235px;
    margin: auto;
    padding: 20px 0px;
    background: #fff;

    table {
      width: 100%;
      border: 1px solid #ddd;
      border-collapse: collapse;
      border-spacing: 0;

      th {
        height: 50px;
        line-height: 50px;
        padding: 0px 0px 0px 15px;
        background-color: #f2f2f2;
        border-left: none;
        border: 1px solid #ddd;
        text-align: left;
        font-weight: 700;
        color: #555;
      }

      td {
        height: 50px;
        line-height: 50px;
        padding: 0px 0px 0px 15px;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        text-align: left;
      }

      .td_th {
        text-align: center;
        color: #242424;
        font-weight: 700;
        width: 16%;
        white-space: nowrap;
      }
    }
  }

  .tab3 {
    width: 1235px;
    margin: auto;
    padding: 20px 0px;
    background: #fff;

    .title {
      color: #333;
      font-size: 16px;
      font-weight: 700;
      padding: 5px 20px;
      background: #f5f5f5;
    }

    .module {
      min-height: 40px;

      .tab {
        width: 150px;
        text-align: center;
        padding: 20px;

        .tab_rate {
          color: #006aff;
          font-size: 30px;
          font-weight: 700;
          padding-top: 5px;
          margin-top: 5px;
          white-space: nowrap;
        }
      }
    }

    .pjTag {
      padding-right: 13px;
      background: #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;

      ul {
        li {
          display: inline-block;
          padding: 13px 14px;
          list-style: none;
        }

        .active {
          color: #006aff;
        }
      }
    }

    .pj_content {
      width: 1235px;
      margin: auto;
      background: #fff;

      .item {
        margin-top: 40px;
        border-bottom: 1px solid #d2cdcd;
        display: flex;

        .l {
          width: 157px;
          padding-left: 52px;

          img {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            margin-bottom: 10px;
            vertical-align: middle;
          }

          .name {
            padding-left: 12px;
          }
        }

        .r {
          flex: 1;

          .xing {
            margin-bottom: 30px;

            img {
              display: inline-block;
              width: 14px;
              height: 14px;
              cursor: pointer;
            }

            div {
              float: right;
              margin-right: 5px;
            }
          }

          .com {
            margin-bottom: 30px;
          }

          .like {
            text-align: right;
            margin-bottom: 30px;

            span {
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .tab4 {
    padding: 30px;
    width: 1235px;
    margin: auto;
    background: #fff;

    img {
      width: 100%;
    }
  }
}
</style>
